<script setup>
import { ref } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
// 接收cart数据
const props = defineProps({
  cartData: {
    type: Array,
    default: () => []
  }
})
const cartTable = ref()
const totalPrice = ref(0) //选中总价
const selectedRows = ref([]) //选中行数据
/**
 * 处理选中
 * @param val 选中行数据
 */
const handleSelectionChange = (val) => {
  // 处理选中项的变化
  totalPrice.value = val.reduce((sum, item) => sum + item.price * item.count, 0)
  selectedRows.value = val
}
/**
 * 数量变化时
 */
const handleNumberChange = () => {
  const rows = cartTable.value.getSelectionRows()
  totalPrice.value = rows.reduce((sum, item) => sum + item.price * item.count, 0)
}
const emit=defineEmits(['del-cart'])
/**
 * 删除购物车商品
 * @param row
 */
const handleDelCart = (row) => {
  ElMessageBox.confirm(
    '是否确认将该商品移出购物车',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      center: true
    }
  )
    .then(() => {
      emit('del-cart', row)
      ElMessage({
        type: 'success',
        message: '已移出'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消'
      })
    })
}
const goPay = () => {
  router.push('/pay')
}
</script>

<template>
  <div style="width: 100%;height: 100%;display: flex;flex-direction: column">
    <el-table
      ref="cartTable"
      :data="cartData"
      style="width: 100%;height: 90%"
      @selection-change="handleSelectionChange"
      :stripe="true"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="商品">
        <template #default="scope">
          <el-image :src="scope.row.proImg" fit="cover" style="width: 80px;height: 80px"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="介绍">
        <template #default="scope">{{ scope.row.proMess?.slice(0, 20) }}</template>
      </el-table-column>
      <el-table-column :sortable="true" label="价格" prop="price">
        <template #default="scope"><span style="color: #cf4444">￥{{ scope.row.price.toFixed(2) * scope.row.count
          }}</span></template>
      </el-table-column>
      <el-table-column label="数量">
        <template #default="scope">
          <el-input-number v-model="cartData[scope.$index].count" :min="1" size="small"
                           style="width: 100px;height: 20px"
                           @change="handleNumberChange"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="加入时间" prop="createtime"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button :icon="Delete" plain size="small" type="danger" @click="handleDelCart(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="cart-footer">
      合计：
      <span class="price">￥{{ totalPrice.toFixed(2) }}</span>
      <el-button :color="'#39c5bb'" :disabled="selectedRows.length<1" plain round type="primary" @click="goPay">{{ selectedRows.length<1?'请先选择商品':'去结算' }}
      </el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.cart-footer {
  width: 100%;
  flex: 1;
  font-size: 21px;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20px;
  gap: 10px;

  .price {
    color: #cf4444;
    margin-right: 20px;
  }
}
</style>